<template>
  <div class="show-main">
    <el-scrollbar style="height: 100%;">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline" size="small">
        <el-form-item label="">
          <el-input v-model="searchForm.name" placeholder="请输入学校名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.stop="search(true)">搜索</el-button>
          <el-button type="success" @click.stop="search">刷新</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="table" border size="small">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="学校名称"></el-table-column>
        <el-table-column label="广告位">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="bannerDetail(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
        <el-table-column label="学校财务">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="financeDetail(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
        <el-table-column label="管理员">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="roleDetail(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
        <el-table-column label="配送箱码">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="boxDetail(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
        <el-table-column label="宿舍楼">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="dorDetail(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
        <el-table-column label="费用设置">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="deliveryDetail(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
        <el-table-column label="下单">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.allow_order == 1 ? '允许下单' : '不允许下单'" placement="top" :enterable="false">
              <el-switch v-model="scope.row.allow_order" :active-value="1" :inactive-value="2" @change="changeAllowOrder(scope.row)"> </el-switch>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="上楼">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.is_go_up == 1 ? '允许上楼' : '不允许上楼'" placement="top" :enterable="false">
              <el-switch v-model="scope.row.is_go_up" :active-value="1" :inactive-value="2" @change="changeGoUp(scope.row)"> </el-switch>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="楼管每单划账费用" prop="dor_manager_price" width="130"></el-table-column>
        <el-table-column label="装箱员每单划账费用" prop="box_price" width="130"></el-table-column>
        <el-table-column label="创建时间" prop="create_time" width="150"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="edit(scope.row.id)">编辑划账费用</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          @size-change="
            value => {
              handleSizeChange(value, 'searchForm', 'search')
            }
          "
          @current-change="
            value => {
              handleCurrentChange(value, 'searchForm', 'search')
            }
          "
          :current-page="searchForm.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="searchForm.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        >
        </el-pagination>
      </div>
    </el-scrollbar>
    <el-dialog title="广告位列表" :visible.sync="bannerVisible" width="1000px" :before-close="handleClose('searchBannerForm')">
      <el-form :inline="true" :model="searchBannerForm" ref="searchForm">
        <el-form-item>
          <el-button type="success" @click.stop="searchBanner">刷新</el-button>
          <el-button type="warning" @click.stop="addBanner">添加</el-button>
        </el-form-item>
      </el-form>
      <el-alert title="注意：最多只能添加六张广告位图片" type="warning"></el-alert>
      <el-table :data="bannerTable" border>
        <el-table-column prop="id" label="ID" width="100"></el-table-column>
        <el-table-column label="图片" width="120">
          <template slot-scope="scope">
            <el-image style="width: 100px;" :src="scope.row.pic" fit="contain"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="跳转路径"></el-table-column>
        <el-table-column prop="sort" label="排序" width="70"></el-table-column>
        <el-table-column label="状态" width="70">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.status == 1 ? '正常' : '禁用'" placement="top" :enterable="false">
              <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" @change="changeBannerStatus(scope.row)"> </el-switch>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="editBanner(scope.row.id)">编辑</el-button>
            <el-button type="text" @click="delBanner(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close('bannerVisible', 'searchBannerForm')" size="small">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title="添加广告位" :visible.sync="addBannerVisible" width="500px" :before-close="handleClose('addBannerForm')">
      <el-form ref="addBannerForm" :model="addBannerForm" label-width="100px" size="small" :rules="rules">
        <el-form-item label="图片" prop="pic">
          <el-upload
            ref="addBannerImage"
            name="image"
            action="#"
            :on-change="
              (file, fileList) => {
                return handleImgChange(file, fileList, 'addBannerForm', 'addBannerImage')
              }
            "
            :on-remove="
              (file, fileList) => {
                return handleImgRemove(file, fileList, 'addBannerForm')
              }
            "
            list-type="picture"
            :limit="1"
            :on-exceed="handleImgExceed"
            :auto-upload="false"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png/jpeg文件，且不超过200kb，宽高建议375*160</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="跳转地址" prop="path">
          <el-input v-model="addBannerForm.path" placeholder="请输入跳转地址" clearable></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="addBannerForm.sort" :min="1" :max="6" label="排序"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close('addBannerVisible', 'addBannerForm')" size="small">取 消</el-button>
        <el-button type="primary" @click="send('addBannerVisible', 'addBannerForm')" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="编辑广告位" :visible.sync="editBannerVisible" width="500px" :before-close="handleClose('editBannerForm')">
      <el-form ref="editBannerForm" :model="editBannerForm" label-width="100px" size="small" :rules="rules">
        <el-form-item label="图片" prop="pic">
          <el-upload
            ref="editBannerImage"
            name="image"
            action="#"
            :on-change="
              (file, fileList) => {
                return handleImgChange(file, fileList, 'editBannerForm', 'editBannerImage')
              }
            "
            :on-remove="
              (file, fileList) => {
                return handleImgRemove(file, fileList, 'editBannerForm')
              }
            "
            list-type="picture"
            :limit="1"
            :on-exceed="handleImgExceed"
            :file-list="fileList"
            :auto-upload="false"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png/jpeg文件，且不超过200kb，宽高建议375*160</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="跳转地址" prop="path">
          <el-input v-model="editBannerForm.path" placeholder="请输入跳转地址" clearable></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="editBannerForm.sort" :min="1" :max="6" label="排序"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close('editBannerVisible', 'editBannerForm')" size="small">取 消</el-button>
        <el-button type="primary" @click="send('editBannerVisible', 'editBannerForm')" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="财务列表" :visible.sync="financeVisible" width="1000px" :before-close="handleClose('searchFinanceForm')">
      <el-form :inline="true" :model="searchFinanceForm" class="demo-form-inline" size="small">
        <el-form-item label="">
          <el-input v-model="searchFinanceForm.name" placeholder="请输入财务名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.stop="searchFinance(true)">搜索</el-button>
          <el-button type="success" @click.stop="searchFinance">刷新</el-button>
          <el-button type="warning" @click="addFinance" style="margin-bottom: 10px;">添加财务</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="financeTable" border size="small">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="account" label="账号"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{ statusName(scope.row.status) }}
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="150"> </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editFinance(scope.row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="changepwdFinance(scope.row.id)">修改密码</el-button>
            <el-button type="text" size="small" @click="delFinance(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          @size-change="
            value => {
              handleSizeChange(value, 'searchFinanceForm', 'searchFinance')
            }
          "
          @current-change="
            value => {
              handleCurrentChange(value, 'searchFinanceForm', 'searchFinance')
            }
          "
          :current-page="searchFinanceForm.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="searchFinanceForm.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="financeCount"
        >
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close('financeVisible', 'searchFinanceForm')" size="small">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title="添加财务" :visible.sync="addFinanceVisible" width="500px" :before-close="handleClose('addFinanceForm')">
      <el-form ref="addFinanceForm" :model="addFinanceForm" label-width="100px" size="small" :rules="rules">
        <el-form-item label="账号" prop="account">
          <el-input v-model="addFinanceForm.account"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
          <el-input v-model="addFinanceForm.pwd" show-password></el-input>
        </el-form-item>
        <el-form-item label="再次密码" prop="repwd">
          <el-input v-model="addFinanceForm.repwd" show-password></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="addFinanceForm.phone" maxlength="11" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="addFinanceForm.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close('addFinanceVisible', 'addFinanceForm')" size="small">取 消</el-button>
        <el-button type="primary" @click="send('addFinanceVisible', 'addFinanceForm')" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="编辑财务" :visible.sync="editFinanceVisible" width="500px" :before-close="handleClose('editFinanceForm')">
      <el-form ref="editFinanceForm" :model="editFinanceForm" label-width="100px" size="small" :rules="rules">
        <el-form-item label="账号" prop="account">
          <el-input v-model="editFinanceForm.account"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="editFinanceForm.phone" maxlength="11" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="editFinanceForm.name"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="editFinanceForm.status">
            <el-radio :label="0">禁用</el-radio>
            <el-radio :label="1">启用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close('editFinanceVisible', 'editFinanceForm')" size="small">取 消</el-button>
        <el-button type="primary" @click="send('editFinanceVisible', 'editFinanceForm')" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="修改密码" :visible.sync="changeFinanceVisible" width="500px" :before-close="handleClose('changeFinanceForm')">
      <el-form ref="changeFinanceForm" :model="changeFinanceForm" label-width="100px" size="small" :rules="rules">
        <el-form-item label="密码" prop="pwd">
          <el-input v-model="changeFinanceForm.pwd" show-password></el-input>
        </el-form-item>
        <el-form-item label="再次密码" prop="chkpwd">
          <el-input v-model="changeFinanceForm.chkpwd" show-password></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close('changeFinanceVisible', 'changeFinanceForm')" size="small">取 消</el-button>
        <el-button type="primary" @click="send('changeFinanceVisible', 'changeFinanceForm')" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="管理员列表" :visible.sync="roleVisible" width="1000px" :before-close="handleClose('searchRoleForm')">
      <el-form :inline="true" :model="searchRoleForm" class="demo-form-inline" size="small">
        <el-form-item label="">
          <el-input v-model="searchRoleForm.name" placeholder="请输入管理员名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchRoleForm.type" placeholder="请选择" clearable>
            <el-option label="财务员" value="1"></el-option>
            <el-option label="装箱员" value="2"></el-option>
            <el-option label="楼栋管理员" value="3"></el-option>
            <el-option label="大配送员" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.stop="searchRole(true)">搜索</el-button>
          <el-button type="success" @click.stop="searchRole">刷新</el-button>
          <el-button type="warning" @click="addRole" style="margin-bottom: 10px;">添加管理员</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="roleTable" border size="small">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="phone" label="电话"></el-table-column>
        <el-table-column label="类型">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 1" style="color: #409eff;">财务员</span>
            <span v-if="scope.row.type == 2" style="color: #67c23a;">装箱员</span>
            <span v-if="scope.row.type == 3" style="color: #e6a23c;">楼栋管理员</span>
            <span v-if="scope.row.type == 4" style="color: #f56c6c;">大配送员</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="changeRoleStatus(scope.row)"> </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="create_time"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editRole(scope.row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="delRole(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          @size-change="
            value => {
              handleSizeChange(value, 'searchRoleForm', 'searchRole')
            }
          "
          @current-change="
            value => {
              handleCurrentChange(value, 'searchRoleForm', 'searchRole')
            }
          "
          :current-page="searchRoleForm.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="searchRoleForm.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="roleCount"
        >
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close('roleVisible', 'searchRoleForm')" size="small">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title="添加管理员" :visible.sync="addRoleVisible" width="500px" :before-close="handleClose('addRoleForm')">
      <el-form ref="addRoleForm" :model="addRoleForm" label-width="100px" size="small" :rules="rules">
        <el-form-item label="名称" prop="name">
          <el-input v-model="addRoleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="addRoleForm.phone" maxlength="11" show-word-limit clearable></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="addRoleForm.type" placeholder="请选择" clearable>
            <el-option label="财务员" :value="1"></el-option>
            <el-option label="装箱员" :value="2"></el-option>
            <el-option label="楼栋管理员" :value="3"></el-option>
            <el-option label="大配送员" :value="4"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close('addRoleVisible', 'addRoleForm')" size="small">取 消</el-button>
        <el-button type="primary" @click="send('addRoleVisible', 'addRoleForm')" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="编辑管理员" :visible.sync="editRoleVisible" width="500px" :before-close="handleClose('editRoleForm')">
      <el-form ref="editRoleForm" :model="editRoleForm" label-width="100px" size="small" :rules="rules">
        <el-form-item label="名称" prop="name">
          <el-input v-model="editRoleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="editRoleForm.phone" maxlength="11" show-word-limit clearable></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="editRoleForm.type" clearable disabled>
            <el-option label="财务员" :value="1"></el-option>
            <el-option label="装箱员" :value="2"></el-option>
            <el-option label="楼栋管理员" :value="3"></el-option>
            <el-option label="大配送员" :value="4"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close('editRoleVisible', 'editRoleForm')" size="small">取 消</el-button>
        <el-button type="primary" @click="send('editRoleVisible', 'editRoleForm')" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="配送箱列表" :visible.sync="boxVisible" width="1000px" :before-close="handleClose('searchBoxForm')">
      <el-form :inline="true" :model="searchBoxForm" class="demo-form-inline" size="small">
        <el-form-item>
          <el-button type="success" @click.stop="searchBox">刷新</el-button>
          <el-button type="warning" @click="addBox" style="margin-bottom: 10px;">添加配送箱</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="boxTable" border size="small">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="code" label="箱子编号"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1" style="color: #409eff;">配送中</span>
            <span v-if="scope.row.status == 0" style="color: #67c23a;">未配送</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="create_time"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showBox(scope.row.code)">查看二维码</el-button>
            <el-button type="text" size="small" @click="delBox(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          @size-change="
            value => {
              handleSizeChange(value, 'searchBoxForm', 'searchBox')
            }
          "
          @current-change="
            value => {
              handleCurrentChange(value, 'searchBoxForm', 'searchBox')
            }
          "
          :current-page="searchBoxForm.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="searchRoleForm.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="boxCount"
        >
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close('boxVisible', 'searchBoxForm')" size="small">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title="二维码" :visible.sync="qrcodeVisible" width="400px" :before-close="handleClose('')">
      <div id="qrcode" ref="qrcode"></div>
      <el-button type="primary" @click="downs" size="small">下载</el-button>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close('qrcodeVisible')" size="small">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title="宿舍楼列表" :visible.sync="dorVisible" width="1000px" :before-close="handleClose('searchDorForm')">
      <el-form :inline="true" :model="searchDorForm" class="demo-form-inline" size="small">
        <el-form-item label="">
          <el-input v-model="searchDorForm.name" placeholder="请输入宿舍楼名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchDorForm.gender" placeholder="请选择" clearable>
            <el-option label="男生宿舍" :value="0"></el-option>
            <el-option label="女生宿舍" :value="1"></el-option>
            <el-option label="混合宿舍" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.stop="searchDor(true)">搜索</el-button>
          <el-button type="success" @click.stop="searchDor">刷新</el-button>
          <el-button type="warning" @click="addDor">添加宿舍楼</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dorTable" border size="small">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="宿舍楼名称"></el-table-column>
        <el-table-column label="类型">
          <template slot-scope="scope">
            <span v-if="scope.row.gender == 0" style="color: #409eff;">男生宿舍</span>
            <span v-if="scope.row.gender == 1" style="color: #67c23a;">女生宿舍</span>
            <span v-if="scope.row.gender == 2" style="color: #e6a23c;">混合宿舍</span>
          </template>
        </el-table-column>
        <el-table-column prop="manager_name" label="管理员"></el-table-column>
        <el-table-column label="楼层" width="70">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="floorDetail(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="create_time"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editDor(scope.row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="delDor(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          @size-change="
            value => {
              handleSizeChange(value, 'searchDorForm', 'searchDor')
            }
          "
          @current-change="
            value => {
              handleCurrentChange(value, 'searchDorForm', 'searchDor')
            }
          "
          :current-page="searchDorForm.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="searchDorForm.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="dorCount"
        >
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close('dorVisible', 'searchDorForm')" size="small">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title="添加宿舍楼" :visible.sync="addDorVisible" width="500px" :before-close="handleClose('addDorForm')">
      <el-form ref="addDorForm" :model="addDorForm" label-width="100px" size="small" :rules="rules">
        <el-form-item label="宿舍楼名称" prop="name">
          <el-input v-model="addDorForm.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="宿舍楼类型" prop="gender">
          <el-select v-model="addDorForm.gender" placeholder="请选择宿舍楼类型" clearable>
            <el-option label="男生宿舍楼" :value="0"></el-option>
            <el-option label="女生宿舍楼" :value="1"></el-option>
            <el-option label="混合宿舍楼" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="楼栋管理员" prop="manag_id">
          <el-select v-model="addDorForm.manag_id" placeholder="请选择楼栋管理员" clearable>
            <el-option v-for="item in managerList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close('addDorVisible', 'addDorForm')" size="small">取 消</el-button>
        <el-button type="primary" @click="send('addDorVisible', 'addDorForm')" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="编辑宿舍楼" :visible.sync="editDorVisible" width="500px" :before-close="handleClose('editDorForm')">
      <el-form ref="editDorForm" :model="editDorForm" label-width="100px" size="small" :rules="rules">
        <el-form-item label="宿舍楼名称" prop="name">
          <el-input v-model="editDorForm.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="宿舍楼类型" prop="gender">
          <el-select v-model="editDorForm.gender" placeholder="请选择宿舍楼类型" clearable>
            <el-option label="男生宿舍楼" :value="0"></el-option>
            <el-option label="女生宿舍楼" :value="1"></el-option>
            <el-option label="混合宿舍楼" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="楼栋管理员" prop="manag_id">
          <el-select v-model="editDorForm.manag_id" placeholder="请选择楼栋管理员" clearable>
            <el-option v-for="item in managerList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close('editDorVisible', 'editDorForm')" size="small">取 消</el-button>
        <el-button type="primary" @click="send('editDorVisible', 'editDorForm')" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="楼层列表" :visible.sync="floorVisible" width="1000px" :before-close="handleClose('searchFloorForm')">
      <el-form :inline="true" :model="searchFloorForm" class="demo-form-inline" size="small">
        <el-form-item label="">
          <el-input v-model="searchFloorForm.name" placeholder="请输入名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.stop="searchFloor(true)">搜索</el-button>
          <el-button type="success" @click.stop="searchFloor">刷新</el-button>
          <el-button type="warning" @click="addFloor">添加楼层</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="floorTable" border size="small">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <!-- <el-table-column prop="conf_name" label="配送费名称">
          <template slot-scope="scope">
            <span v-if="scope.row.conf_name === null" style="color: #f56c6c">---</span>
            <span v-else>{{scope.row.conf_name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="delivery" label="配送费（元）">
          <template slot-scope="scope">
            <span v-if="scope.row.delivery === null" style="color: #f56c6c">---</span>
            <span v-else>{{scope.row.delivery}}</span>
          </template>
        </el-table-column> -->
        <el-table-column prop="username" label="配送员">
          <template slot-scope="scope">
            <span v-if="scope.row.user_id == 0" style="color: #f56c6c;">---</span>
            <span v-else>{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="create_time" width="150"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editFloor(scope.row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="delFloor(scope.row.id)">删除</el-button>
            <el-button type="text" size="small" v-if="scope.row.user_id == 0" @click="bindUser(scope.row.id)">绑定</el-button>
            <el-button type="text" size="small" v-else @click="unbindUser(scope.row)">解绑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          @size-change="
            value => {
              handleSizeChange(value, 'searchFloorForm', 'searchFloor')
            }
          "
          @current-change="
            value => {
              handleCurrentChange(value, 'searchFloorForm', 'searchFloor')
            }
          "
          :current-page="searchFloorForm.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="searchFloorForm.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="floorCount"
        >
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close('floorVisible', 'searchFloorForm')" size="small">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title="添加楼层" :visible.sync="addFloorVisible" width="500px" :before-close="handleClose('addFloorForm')">
      <el-form ref="addFloorForm" :model="addFloorForm" label-width="100px" size="small" :rules="rules">
        <el-form-item label="名称" prop="name">
          <el-input v-model="addFloorForm.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close('addFloorVisible', 'addFloorForm')" size="small">取 消</el-button>
        <el-button type="primary" @click="send('addFloorVisible', 'addFloorForm')" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="编辑楼层" :visible.sync="editFloorVisible" width="500px" :before-close="handleClose('editFloorForm')">
      <el-form ref="editFloorForm" :model="editFloorForm" label-width="100px" size="small" :rules="rules">
        <el-form-item label="名称" prop="name">
          <el-input v-model="editFloorForm.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close('editFloorVisible', 'editFloorForm')" size="small">取 消</el-button>
        <el-button type="primary" @click="send('editFloorVisible', 'editFloorForm')" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="绑定配送员" :visible.sync="bindUserVisible" width="500px" :before-close="handleClose('bindUserForm')">
      <el-form ref="bindUserForm" :model="bindUserForm" label-width="100px" size="small" :rules="rules">
        <el-form-item label="配送员" prop="user_id">
          <el-select v-model="bindUserForm.user_id" placeholder="请输入配送员名称" :remote-method="remoteMethod" filterable remote clearable>
            <el-option v-for="item in userList" :key="item.id" :label="item.name + '---' + item.phone" :value="item.id"> </el-option>
            <el-pagination
              @current-change="
                value => {
                  handleCurrentChange(value, 'searchBindForm', 'searchUnbind')
                }
              "
              :current-page="searchBindForm.page"
              :page-size="searchBindForm.limit"
              layout="total, prev, pager, next"
              :pager-count="5"
              :total="bindCount"
            >
            </el-pagination>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close('bindUserVisible', 'bindUserForm')" size="small">取 消</el-button>
        <el-button type="primary" @click="send('bindUserVisible', 'bindUserForm')" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="费用列表" :visible.sync="deliveryVisible" width="1000px" :before-close="handleClose('searchDeliveryForm')" destroy-on-close>
      <el-form :inline="true" :model="searchDeliveryForm" class="demo-form-inline" size="small">
        <el-form-item>
          <el-button type="success" @click.stop="searchDelivery">刷新</el-button>
          <!-- <el-button type="warning" @click="addFloor">添加楼层</el-button> -->
        </el-form-item>
      </el-form>
      <el-form ref="deliveryForm" :model="deliveryForm" label-width="100px" size="small" :rules="rules">
        <el-table :data="deliveryForm.delivery" border size="small">
          <el-table-column prop="min" label="最低价">
            <template slot-scope="scope">
              <el-tag @click="changePrice(scope.$index, scope.row.min, 1)">{{ scope.row.min }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="max" label="最高价">
            <template slot-scope="scope">
              <el-tag type="success" @click="changePrice(scope.$index, scope.row.max, 2)">{{ scope.row.max }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="service" label="服务费">
            <template slot-scope="scope">
              <el-tag type="warning" @click="changePrice(scope.$index, scope.row.service, 3)">{{ scope.row.service }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="send" label="上楼费">
            <template slot-scope="scope">
              <el-tag type="danger" @click="changePrice(scope.$index, scope.row.send, 4)">{{ scope.row.send }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="delDelidery(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-col :span="4" :offset="20">
            <el-button type="warning" @click="addDelidery" size="small">再加一个</el-button>
            <el-button type="primary" @click="send('', 'deliveryForm')" size="small">提 交</el-button>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close('deliveryVisible', 'searchDeliveryForm')" size="small">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title="编辑划账费用" :visible.sync="editVisible" width="500px" :before-close="handleClose('editForm')">
      <el-form ref="editForm" :model="editForm" label-width="150px" size="small" :rules="rules">
        <el-form-item label="楼管每单划账费用">
          <el-input-number v-model="editForm.dor_manager_price" :precision="2" :step="0.1" :min="0.1"></el-input-number>
        </el-form-item>
        <el-form-item label="装箱员每单划账费用">
          <el-input-number v-model="editForm.box_price" :precision="2" :step="0.1" :min="0.1"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close('editVisible', 'editForm')" size="small">取 消</el-button>
        <el-button type="primary" @click="send('editVisible', 'editForm')" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getSchoolList,
  getSchoolRolleList,
  addRole,
  changeRoleStatus,
  getSingleRole,
  editRole,
  delRole,
  getBoxList,
  addBox,
  delBox,
  getDorList,
  getRoleTypeList,
  StoriedInc,
  deleteStoried,
  storiedFind,
  storiedEdit,
  getFloorList,
  addFloor,
  deleteFloor,
  getFloorOnly,
  editFloor,
  getUnbindUser,
  bindUser,
  unbindUser,
  getSchoolDeliveryList,
  editDelivery,
  getDrawInfo,
  editDraw,
  changeAllowOrder,
  changeGoUp,
  schoolFinanceList,
  schoolFinanceOnly,
  schoolFinanceAdd,
  schoolFinanceEdit,
  schoolFinanceDelete,
  schoolFinanceChangePwd,
  changeBannerStatus,
  getBannerList,
  getBannerOnly,
  addBanner,
  editBanner,
  delBanner
} from '@/network/api.js'
import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'
export default {
  name: 'dormitory',
  data() {
    return {
      actSchoolId: 0, // 当前活跃的学校id
      actDorId: 0, // 当前活跃的宿舍楼id
      searchForm: {
        page: 1,
        limit: 10,
        name: ''
      },
      count: 0, // 总记录数
      table: [], // 学校列表

      searchBannerForm: {
        school_id: 0
      },
      bannerTable: [], // 财务列表
      editBannerForm: {
        id: 0,
        school_id: 0,
        path: '', // 名称
        pic: '', // 图片
        sort: 1 // 排序
      },
      // 添加表单
      addBannerForm: {
        school_id: 0,
        path: '', // 名称
        pic: '', // 图片
        sort: 1 // 排序
      },
      fileList: [],
      bannerVisible: false,
      addBannerVisible: false,
      editBannerVisible: false,
      changeBannerVisible: false,

      searchFinanceForm: {
        page: 1,
        limit: 10,
        school_id: 0,
        name: ''
      },
      addFinanceForm: {
        school_id: 0,
        account: '', // 账号
        pwd: '', // 密码
        name: '', // 名称
        repwd: '', // 再次输入密码
        phone: '' // 电话号码
      },
      editFinanceForm: {
        school_id: 0,
        id: 0,
        account: '', // 账号
        name: '', // 名称
        phone: '', // 电话号码
        status: 0 // 状态
      }, // 编辑的表单
      changeFinanceForm: {
        school_id: 0,
        id: 0,
        pwd: '',
        chkpwd: ''
      }, // 修改密码表单
      financeCount: 0, //  财务记录数
      financeTable: [], // 财务列表
      financeVisible: false,
      addFinanceVisible: false,
      editFinanceVisible: false,
      changeFinanceVisible: false,

      searchRoleForm: {
        page: 1,
        limit: 10,
        school_id: 0,
        name: '',
        type: ''
      },
      addRoleForm: {
        name: '', // 名称
        phone: '', // 电话
        type: '', // 1：财务员  2：装箱员 3：楼栋管理员 4：大配送员
        school_id: '' // 学校id
      },
      editRoleForm: {
        id: '',
        name: '', // 名称
        phone: '', // 电话
        // type: '', // 1：财务员  2：装箱员 3：楼栋管理员 4：大配送员
        school_id: '' // 学校id
      },
      roleCount: 0, // 管理员记录数
      roleTable: [], // 管理员列表
      roleVisible: false,
      addRoleVisible: false,
      editRoleVisible: false,

      searchBoxForm: {
        page: 1,
        limit: 10,
        school_id: 0
      },
      addBoxForm: {
        school_id: '' // 学校id
      },
      boxCount: 0, // 配送箱总记录数
      boxTable: [], // 配送箱列表
      qrcode: '',
      boxVisible: false,
      qrcodeVisible: false,

      searchDorForm: {
        page: 1,
        limit: 10,
        school_id: 0,
        name: '',
        gender: ''
      },
      addDorForm: {
        name: '', // 名称
        gender: '', // '0:男生宿舍 1：女生宿舍 2：混合宿舍'
        school_id: '', // 学校id
        manag_id: ''
      },
      editDorForm: {
        id: '',
        name: '', // 名称
        gender: '', // '0:男生宿舍 1：女生宿舍 2：混合宿舍'
        school_id: '', // 学校id
        manag_id: ''
      },
      managerList: [],
      dorCount: 0, // 宿舍楼记录数
      dorTable: [], // 宿舍楼列表
      dorVisible: false,
      addDorVisible: false,
      editDorVisible: false,

      searchFloorForm: {
        page: 1,
        limit: 10,
        school_id: 0,
        dormitory_id: 0,
        name: ''
      },
      addFloorForm: {
        name: '', // 名称
        dormitory_id: '', // 宿舍楼id
        school_id: '' // 学校id
        // floor_conf_id: ''
      },
      editFloorForm: {
        id: '',
        name: '', // 名称
        dormitory_id: '', // 宿舍楼id
        school_id: '' // 学校id
        // floor_conf_id: ''
      },
      confList: [],
      floorTable: [], // 楼层列表
      floorCount: 0, // 楼层总数
      floorVisible: false,
      addFloorVisible: false,
      editFloorVisible: false,

      searchBindForm: {
        page: 1,
        limit: 10,
        school_id: 0,
        dormitory_id: 0,
        name: ''
      },
      bindUserForm: {
        delivery_floor: '',
        dormitory_id: '', // 宿舍楼id
        school_id: '', // 学校id
        user_id: ''
      },
      bindCount: 0, // 楼层总数
      userList: [],
      bindUserVisible: false,

      searchDeliveryForm: {
        school_id: 0
      },
      deliveryForm: {
        id: 0,
        delivery: []
      }, // 费用列表
      deliveryVisible: false,
      editForm: {
        id: 0,
        dor_manager_price: 0,
        box_price: 0
      },
      editVisible: false,

      rules: {
        account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
        type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择类型', trigger: 'blur' }],
        manag_id: [{ required: true, message: '请选择管理员', trigger: 'blur' }],
        delivery: [{ required: true, message: '请输入配送费', trigger: 'blur' }],
        min: [{ required: true, message: '请选择配置', trigger: 'blur' }],
        user_id: [{ required: true, message: '请选择配送员', trigger: 'blur' }],
        pwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        repwd: [
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请再次输入密码'))
              } else if (value !== this.addFinanceForm.pwd) {
                callback(new Error('两次输入密码不一致!'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        chkpwd: [
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请再次输入密码'))
              } else if (value !== this.changeFinanceForm.pwd) {
                callback(new Error('两次输入密码不一致!'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        path: [{ required: true, message: '地址必须', trigger: 'blur' }],
        pic: [{ required: true, message: '图片必须', trigger: 'change' }],
        sort: [
          { required: true, message: '排序必须', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (!/^[1-6]$/.test(value)) {
                callback(new Error('请输入合法的排序'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.search(true)
  },
  computed: {
    statusName() {
      return status => {
        switch (status) {
          case 0:
            return '禁用'
          case 1:
            return '启用'
        }
      }
    }
  },
  methods: {
    // 添加文件
    handleImgChange(file, fileList, formName, imageName) {
      if (file && file.status === 'ready') {
        // 判断文件类型
        const imageType = ['image/png', 'image/jpeg', 'image/jpeg']
        if (imageType.indexOf(file.raw.type) === -1) {
          this.$message.error('请上传png|jpg|jpeg图片')
          return this.$refs[imageName].clearFiles()
        }
        if (file.size > 1024 * 200) {
          this.$message.error('请上传小于200kb图片')
          return this.$refs[imageName].clearFiles()
        }
        this[formName].pic = file.raw
        this.$refs[formName].clearValidate('pic')
      }
    },
    handleImgRemove(file, fileList, formName) {
      // console.log(file)
      // if (file && file.status === 'ready') {
      // 移除方法
      this[formName].pic = ''
      // console.log(this[this.formName])
      this.$refs[formName].validateField('pic')
      // }
    },
    // 超出上传个数
    handleImgExceed(files, fileList) {
      this.$message.error('已有pic图片请先删除')
    },
    changePrice(index, valuex, type) {
      this.$prompt('请输入价格', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,
        inputErrorMessage: '不合法的价格'
      })
        .then(({ value }) => {
          switch (type) {
            case 1:
              if (this.deliveryForm.delivery[index - 1] !== undefined) {
                if (parseFloat(value) >= parseFloat(this.deliveryForm.delivery[index].max)) {
                  return this.$message.error('当前数据不能大于等于最高价')
                } else if (parseFloat(value) <= parseFloat(this.deliveryForm.delivery[index - 1].min)) {
                  return this.$message.error('当前数据不能小于等于上一条最低价')
                } else {
                  this.deliveryForm.delivery[index].min = parseFloat(value).toFixed(2)
                  this.deliveryForm.delivery[index - 1].max = parseFloat(value).toFixed(2)
                }
              } else {
                if (parseFloat(value) >= parseFloat(this.deliveryForm.delivery[index].max)) {
                  return this.$message.error('当前数据不能大于等于最高价')
                } else {
                  this.deliveryForm.delivery[index].min = parseFloat(value).toFixed(2)
                }
              }
              break
            case 2:
              if (this.deliveryForm.delivery[index + 1] !== undefined) {
                if (parseFloat(value) <= parseFloat(this.deliveryForm.delivery[index].min)) {
                  return this.$message.error('当前数据不能小于等于最低价')
                } else if (parseFloat(value) >= parseFloat(this.deliveryForm.delivery[index + 1].max)) {
                  return this.$message.error('当前数据不能大于等于下一条最高价')
                } else {
                  this.deliveryForm.delivery[index].max = parseFloat(value).toFixed(2)
                  this.deliveryForm.delivery[index + 1].min = parseFloat(value).toFixed(2)
                }
              } else {
                if (parseFloat(value) <= parseFloat(this.deliveryForm.delivery[index].min)) {
                  return this.$message.error('当前数据不能小于等于最低价')
                } else {
                  this.deliveryForm.delivery[index].max = parseFloat(value).toFixed(2)
                }
              }
              break
            case 3:
              this.deliveryForm.delivery[index].service = parseFloat(value).toFixed(2)
              break
            case 4:
              this.deliveryForm.delivery[index].send = parseFloat(value).toFixed(2)
              break
          }
        })
        .catch(() => {
          this.$message.warning('您取消了操作')
        })
    },
    // 修改学校下单状态
    changeAllowOrder(ev) {
      this.$confirm('确定修改下单状态吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        // closeOnClickModal: false
      })
        .then(async () => {
          try {
            await changeAllowOrder({ id: ev.id, allow_order: ev.allow_order })
          } catch (e) {
            ev.allow_order = ev.allow_order === 1 ? 2 : 1
            this.$message.error(e.message)
          }
        })
        .catch(() => {
          ev.allow_order = ev.allow_order === 1 ? 2 : 1
          this.$message.warning('您已取消操作')
        })
    },
    // 修改学校上楼状态
    changeGoUp(ev) {
      this.$confirm('确定修改上楼状态吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        // closeOnClickModal: false
      })
        .then(async () => {
          try {
            await changeGoUp({ id: ev.id, is_go_up: ev.is_go_up })
          } catch (e) {
            ev.is_go_up = ev.is_go_up === 1 ? 2 : 1
            this.$message.error(e.message)
          }
        })
        .catch(() => {
          ev.is_go_up = ev.is_go_up === 1 ? 2 : 1
          this.$message.warning('您已取消操作')
        })
    },
    // 每页条数变化
    handleSizeChange(val, formName, searchName) {
      this[formName].limit = val
      this[searchName]()
    },
    // 当前页变化
    handleCurrentChange(val, formName, searchName) {
      this[formName].page = val
      this[searchName]()
    },
    async search(pageInit = false) {
      try {
        if (pageInit === true) {
          this.searchForm.page = 1
        }
        const rtn = await getSchoolList(this.searchForm)
        this.table = rtn.data.list
        this.count = rtn.data.count
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 编辑划账费用
    async edit(id) {
      try {
        const rtn = await getDrawInfo({ id })
        this.editVisible = true
        this.$nextTick(() => {
          this.editForm = rtn.data
        })
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 广告位详情
    bannerDetail(id) {
      this.actSchoolId = id
      this.searchBannerForm.school_id = id
      this.searchBanner()
    },
    async searchBanner() {
      try {
        const rtn = await getBannerList(this.searchBannerForm)
        this.bannerTable = rtn.data
        this.bannerVisible = true
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 添加广告位
    addBanner() {
      if (this.bannerTable.length >= 6) {
        return this.$message.error('最多添加6张轮播图')
      }
      this.addBannerForm.school_id = this.actSchoolId
      this.addBannerVisible = true
    },
    // 编辑广告位
    async editBanner(id) {
      try {
        const rtn = await getBannerOnly({ id, school_id: this.actSchoolId })
        this.editBannerVisible = true
        this.$nextTick(() => {
          this.editBannerForm = rtn.data
          this.fileList = [{ url: [rtn.data.pic] }]
        })
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 删除广告位
    delBanner(id) {
      this.$confirm('您确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      })
        .then(async () => {
          try {
            await delBanner({ id, school_id: this.actSchoolId })
            this.searchBanner()
          } catch (e) {
            this.$message.error(e.message)
          }
        })
        .catch(() => {
          this.$message.warning('您已取消操作')
        })
    },
    // 修改状态
    changeBannerStatus(ev) {
      let msg = ''
      let oldStatus = ''
      switch (ev.status) {
        case 1:
          msg = '您确定要启用该广告位吗?'
          oldStatus = 2
          break
        case 2:
          msg = '此操作将禁用该广告位, 是否确定?'
          oldStatus = 1
          break
        default:
          return this.$message.error('不可用的操作')
      }
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      })
        .then(async () => {
          try {
            await changeBannerStatus({ id: ev.id, status: ev.status, school_id: this.actSchoolId })
          } catch (e) {
            ev.status = oldStatus
            this.$message.error(e.message)
          }
        })
        .catch(() => {
          ev.status = oldStatus
          this.$message.warning('您已取消操作')
        })
    },
    // 学校财务详情
    financeDetail(id) {
      this.actSchoolId = id
      this.searchFinanceForm.school_id = id
      this.searchFinance(true)
    },
    async searchFinance(pageInit = false) {
      try {
        if (pageInit === true) {
          this.searchFinanceForm.page = 1
        }
        const rtn = await schoolFinanceList(this.searchFinanceForm)
        this.financeTable = rtn.data.list
        this.financeCount = rtn.data.count
        this.financeVisible = true
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 添加财务
    addFinance() {
      this.addFinanceForm.school_id = this.actSchoolId
      this.addFinanceVisible = true
    },
    // 编辑财务
    async editFinance(id) {
      try {
        const rtn = await schoolFinanceOnly({ id, school_id: this.actSchoolId })
        this.editFinanceVisible = true
        this.$nextTick(() => {
          this.editFinanceForm = rtn.data
        })
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 删除财务
    async delFinance(id) {
      try {
        await schoolFinanceDelete({ id, school_id: this.actSchoolId })
        this.searchFinance()
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 修改密码
    changepwdFinance(id) {
      this.changeFinanceForm.id = id
      this.changeFinanceForm.school_id = this.actSchoolId
      this.changeFinanceVisible = true
    },
    // 管理员详情
    roleDetail(id) {
      this.actSchoolId = id
      this.searchRoleForm.school_id = id
      this.searchRole(true)
    },
    async searchRole(pageInit = false) {
      try {
        if (pageInit === true) {
          this.searchRoleForm.page = 1
        }
        const rtn = await getSchoolRolleList(this.searchRoleForm)
        this.roleTable = rtn.data.list
        this.roleCount = rtn.data.count
        this.roleVisible = true
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 添加管理员
    addRole() {
      this.addRoleForm.school_id = this.actSchoolId
      this.addRoleVisible = true
    },
    // 修改管理员状态
    async changeRoleStatus(row) {
      try {
        await changeRoleStatus({
          school_role_id: row.id,
          school_id: this.actSchoolId,
          status: row.status
        })
      } catch (e) {
        row.status = row.status === 1 ? 0 : 1
        this.$message.error(e.message)
      }
    },
    // 编辑管理员
    async editRole(id) {
      try {
        const rtn = await getSingleRole({ id, school_id: this.actSchoolId })
        this.editRoleVisible = true
        this.$nextTick(() => {
          this.editRoleForm = rtn.data
        })
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 删除管理员
    async delRole(id) {
      try {
        await delRole({ id, school_id: this.actSchoolId })
        this.searchRole()
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 配送箱详情
    boxDetail(id) {
      this.actSchoolId = id
      this.searchBoxForm.school_id = id
      this.searchBox(true)
    },
    async searchBox(pageInit = false) {
      try {
        if (pageInit === true) {
          this.searchBoxForm.page = 1
        }
        const rtn = await getBoxList(this.searchBoxForm)
        this.boxTable = rtn.data.list
        this.boxCount = rtn.data.count
        this.boxVisible = true
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 添加配送箱
    async addBox() {
      this.addBoxForm.school_id = this.actSchoolId
      try {
        await addBox(this.addBoxForm)
        this.searchBox()
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 删除配送箱
    async delBox(id) {
      try {
        await delBox({ id, school_id: this.actSchoolId })
        this.searchBox()
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 展示二维码
    showBox(code) {
      this.qrcodeVisible = true
      this.$nextTick(() => {
        document.getElementById('qrcode').innerHTML = ''
        const qrcode = new QRCode(this.$refs.qrcode, {
          width: 200,
          height: 200, // 高度
          text: code, // 二维码内容
          background: '#fff'
        })
        this.qrcode = qrcode
      })
    },
    // 下载二维码
    downs() {
      html2canvas(this.$refs.qrcode, {
        backgroundColor: '#fff',
        width: 220,
        height: 220
      })
        .then(canvas => {
          const a = document.createElement('a')
          a.href = canvas.toDataURL('image/jpeg')
          //   // 设置下载文件的名字
          a.download = 'qrcode'
          //   // 点击
          a.click()
        })
        .catch(() => {
          this.$message.error('下载失败')
        })
    },
    // 宿舍楼详情
    dorDetail(id) {
      this.actSchoolId = id
      this.searchDorForm.school_id = id
      this.searchDor(true)
    },
    async searchDor(pageInit = false) {
      try {
        if (pageInit === true) {
          this.searchDorForm.page = 1
        }
        const rtn = await getDorList(this.searchDorForm)
        this.dorTable = rtn.data.list
        this.dorCount = rtn.data.count
        this.dorVisible = true
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 添加宿舍楼
    async addDor() {
      this.addDorForm.school_id = this.actSchoolId
      try {
        const rtn = await getRoleTypeList({
          school_id: this.actSchoolId,
          type: 3
        })
        this.managerList = rtn.data
        this.addDorVisible = true
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 编辑管理员
    async editDor(id) {
      try {
        const rtn = await storiedFind({ id, school_id: this.actSchoolId })
        this.editDorVisible = true
        this.$nextTick(() => {
          this.editDorForm = rtn.data.info
          this.managerList = rtn.data.managerInfo
        })
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 删除宿舍楼
    async delDor(id) {
      try {
        await deleteStoried({ id, school_id: this.actSchoolId })
        this.searchDor()
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 费用设置详情
    deliveryDetail(id) {
      this.actSchoolId = id
      this.searchDeliveryForm.school_id = id
      this.searchDelivery()
    },
    async searchDelivery() {
      try {
        const rtn = await getSchoolDeliveryList(this.searchDeliveryForm)
        const delivery = []
        if (rtn.data.delivery !== '') {
          const outList = rtn.data.delivery.split(',')
          outList.forEach((item, index) => {
            const tempItem = item.split('-')
            delivery.push({
              min: parseFloat(tempItem[0]).toFixed(2),
              max: parseFloat(tempItem[1]).toFixed(2),
              service: parseFloat(tempItem[2]).toFixed(2),
              send: parseFloat(tempItem[3]).toFixed(2)
            })
          })
        }
        this.deliveryVisible = true

        // this.$nextTick(() => {
        //   this.deliveryForm.id = 0
        //   this.deliveryForm.delivery = []
        this.deliveryForm.id = rtn.data.id
        this.deliveryForm.delivery = delivery
        // })
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    minChage(currentValue, oldValue, index) {
      if (this.deliveryForm.delivery[index - 1] !== undefined) {
        this.deliveryForm.delivery[index - 1].max = currentValue.toFixed(2)
      }
      // console.log(this.deliveryForm.delivery[index - 1])
    },
    maxChage(currentValue, oldValue, index) {
      if (this.deliveryForm.delivery[index + 1] !== undefined) {
        this.deliveryForm.delivery[index + 1].min = currentValue.toFixed(2)
      }
      // console.log(this.deliveryForm.delivery[index - 1])
    },
    // 添加费用
    addDelidery() {
      const len = this.deliveryForm.delivery.length
      if (len === 0) {
        this.deliveryForm.delivery.push({ min: '5.00', max: '12.00', service: '1.00', send: '0.70' })
      } else {
        const last = this.deliveryForm.delivery[len - 1]
        this.deliveryForm.delivery.push({
          min: parseFloat(last.max).toFixed(2),
          max: (parseFloat(last.max) + 8.0).toFixed(2),
          service: (parseFloat(last.service) + 0.3).toFixed(2),
          send: (parseFloat(last.send) + 0.2).toFixed(2)
        })
      }
    },
    // 删除费用
    delDelidery(index) {
      const len = this.deliveryForm.delivery.length
      if (index === 0 && len >= 2) {
        this.deliveryForm.delivery[index + 1].min = parseFloat(this.deliveryForm.delivery[index].min).toFixed(2)
      } else if (index !== 0 && index !== len - 1 && len >= 3) {
        this.deliveryForm.delivery[index + 1].min = parseFloat(this.deliveryForm.delivery[index - 1].max).toFixed(2)
      }
      this.deliveryForm.delivery.splice(index, 1)
    },
    // 楼层详情
    floorDetail(id) {
      this.actDorId = id
      this.searchFloorForm.dormitory_id = id
      this.searchFloorForm.school_id = this.actSchoolId
      this.searchFloor(true)
    },
    async searchFloor(pageInit = false) {
      try {
        if (pageInit === true) {
          this.searchFloorForm.page = 1
        }
        const rtn = await getFloorList(this.searchFloorForm)
        this.floorTable = rtn.data.list
        this.floorCount = rtn.data.count
        this.floorVisible = true
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 添加楼层
    addFloor() {
      this.addFloorForm.dormitory_id = this.actDorId
      this.addFloorForm.school_id = this.actSchoolId
      this.addFloorVisible = true
    },
    // 编辑楼层
    async editFloor(id) {
      try {
        const rtn = await getFloorOnly({ id, school_id: this.actSchoolId, dormitory_id: this.actDorId })
        this.editFloorVisible = true
        this.$nextTick(() => {
          this.confList = rtn.data.confInfo
          this.editFloorForm = rtn.data.info
        })
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 删除楼层
    async delFloor(id) {
      try {
        await deleteFloor({ id, school_id: this.actSchoolId, dormitory_id: this.actDorId })
        this.searchFloor()
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 绑定用户
    bindUser(id) {
      this.bindUserForm.delivery_floor = id
      this.bindUserForm.school_id = this.actSchoolId
      this.bindUserForm.dormitory_id = this.actDorId
      this.searchBindForm.school_id = this.actSchoolId
      this.searchBindForm.dormitory_id = this.actDorId
      this.bindUserVisible = true
    },
    // 解绑用户
    async unbindUser(row) {
      try {
        await unbindUser({ delivery_floor: row.id, school_id: this.actSchoolId, dormitory_id: this.actDorId, user_id: row.user_id })
        this.searchFloor()
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    async searchUnbind(pageInit = false) {
      try {
        if (pageInit === true) {
          this.searchBindForm.page = 1
        }
        const rtn = await getUnbindUser(this.searchBindForm)
        this.userList = rtn.data.list
        this.bindCount = rtn.data.count
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    remoteMethod(query) {
      if (query.trim() === '') {
        this.userList = []
        this.bindCount = 0
      } else {
        this.searchBindForm.name = query
        this.searchUnbind(true)
      }
    },
    myClose(formName) {
      switch (formName) {
        case 'searchBannerForm':
          this.searchBannerForm = { school_id: 0 }
          break
        case 'addBannerForm':
          this.$refs[formName].resetFields()
          this[formName].pic = ''
          this.$refs.addBannerImage.clearFiles() // 删除预览
          break
        case 'editBannerForm':
          this.$refs[formName].resetFields()
          this[formName].pic = ''
          this.$refs.editBannerImage.clearFiles() // 删除预览
          break
        case 'searchFinanceForm':
          this.searchFinanceForm = { page: 1, limit: 10, school_id: 0, name: '' }
          break
        case 'searchRoleForm':
          this.searchRoleForm = { page: 1, limit: 10, school_id: 0, name: '', type: '' }
          break
        case 'searchBoxForm':
          this.searchBoxForm = { page: 1, limit: 10, school_id: 0 }
          break
        case 'searchDorForm':
          this.searchDorForm = { page: 1, limit: 10, school_id: 0, name: '', gender: '' }
          break
        case 'searchFloorForm':
          this.searchFloorForm = { page: 1, limit: 10, school_id: 0, dormitory_id: '' }
          break
        case 'searchDeliveryForm':
          this.searchDeliveryForm = { school_id: 0 }
          this.deliveryForm = { id: 0, delivery: [] }
          break
        case '':
          break
        default:
          this.$refs[formName].resetFields()
      }
    },
    // 关闭弹出前操作(不包括取消按钮)
    handleClose(formName) {
      return done => {
        this.myClose(formName)
        done()
      }
    },
    // 取消按钮
    close(visibleName, formName) {
      this.myClose(formName)
      this[visibleName] = false
    },
    send(visibleName, formName) {
      this.$refs[formName].validate(async valid => {
        if (!valid) return false
        switch (formName) {
          case 'addBannerForm': // 添加广告位
            try {
              await addBanner(this.addBannerForm)
              this.close('addBannerVisible', 'addBannerForm')
              this.searchBanner()
            } catch (e) {
              this.$message.error(e.message)
            }
            break
          case 'editBannerForm': // 编辑广告位
            try {
              await editBanner(this.editBannerForm)
              this.close('editBannerVisible', 'editBannerForm')
              this.searchBanner()
            } catch (e) {
              this.$message.error(e.message)
            }
            break
          case 'addRoleForm': // 添加管理员
            try {
              await addRole(this.addRoleForm)
              this.close('addRoleVisible', 'addRoleForm')
              this.searchRole()
            } catch (e) {
              this.$message.error(e.message)
            }
            break
          case 'editRoleForm': // 编辑管理员
            try {
              await editRole(this.editRoleForm)
              this.close('editRoleVisible', 'editRoleForm')
              this.searchRole()
            } catch (e) {
              this.$message.error(e.message)
            }
            break
          case 'addDorForm': // 添加宿舍楼
            try {
              await StoriedInc(this.addDorForm)
              this.close('addDorVisible', 'addDorForm')
              this.searchDor()
            } catch (e) {
              this.$message.error(e.message)
            }
            break
          case 'editDorForm': // 编辑宿舍楼
            try {
              await storiedEdit(this.editDorForm)
              this.close('editDorVisible', 'editDorForm')
              this.searchDor()
            } catch (e) {
              this.$message.error(e.message)
            }
            break
          case 'deliveryForm': // 提交费用设置
            try {
              if (this.deliveryForm.delivery.length === 0) {
                return this.$message.error('请至少添加一条费用')
              }
              const postData = {}
              postData.id = this.deliveryForm.id
              postData.delivery = ''
              for (const key in this.deliveryForm.delivery) {
                const temp = this.deliveryForm.delivery[key]
                if (parseFloat(temp.max) <= parseFloat(temp.min)) {
                  // console.log(this.deliveryForm.delivery[key].max)
                  // console.log(this.deliveryForm.delivery[key].min)
                  return this.$message.error('最高价不能小于等于最低价，请仔细检查')
                }
                postData.delivery += `${temp.min}-${temp.max}-${temp.service}-${temp.send},`
              }
              postData.delivery = postData.delivery.substr(0, postData.delivery.length - 1)
              await editDelivery(postData)
              // this.close('addConfVisible', 'addConfForm')
              this.searchDelivery()
            } catch (e) {
              this.$message.error(e.message)
            }
            break
          // case 'editConfForm': // 编辑配置
          //   try {
          //     await editConf(this.editConfForm)
          //     this.close('editConfVisible', 'editConfForm')
          //     this.searchConf()
          //   } catch (e) {
          //     this.$message.error(e.message)
          //   }
          //   break
          case 'addFloorForm': // 添加楼层
            try {
              await addFloor(this.addFloorForm)
              this.close('addFloorVisible', 'addFloorForm')
              this.searchFloor()
            } catch (e) {
              this.$message.error(e.message)
            }
            break
          case 'editFloorForm': // 编辑楼层
            try {
              await editFloor(this.editFloorForm)
              this.close('editFloorVisible', 'editFloorForm')
              this.searchFloor()
            } catch (e) {
              this.$message.error(e.message)
            }
            break
          case 'bindUserForm': // 绑定配送员
            try {
              await bindUser(this.bindUserForm)
              this.close('bindUserVisible', 'bindUserForm')
              this.searchFloor()
            } catch (e) {
              this.$message.error(e.message)
            }
            break
          case 'editForm': // 编辑划账费用
            try {
              await editDraw(this.editForm)
              this.close('editVisible', 'editForm')
              this.search()
            } catch (e) {
              this.$message.error(e.message)
            }
            break
          case 'addFinanceForm': // 添加财务
            try {
              await schoolFinanceAdd(this.addFinanceForm)
              this.close('addFinanceVisible', 'addFinanceForm')
              this.searchFinance()
            } catch (e) {
              this.$message.error(e.message)
            }
            break
          case 'editFinanceForm': // 编辑财务
            try {
              await schoolFinanceEdit(this.editFinanceForm)
              this.close('editFinanceVisible', 'editFinanceForm')
              this.searchFinance()
            } catch (e) {
              this.$message.error(e.message)
            }
            break
          case 'changeFinanceForm': // 修改密码表单
            try {
              await schoolFinanceChangePwd(this.changeFinanceForm)
              this.close('changeFinanceVisible', 'changeFinanceForm')
              this.searchFinance()
            } catch (e) {
              this.$message.error(e.message)
            }
            break
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
/deep/#qrcode {
  //图片有白边填充css
  display: inline-block;
  width: 200px;
  height: 200px;
  padding: 10px;
  img {
    background-color: #fff;
  }
}
</style>
